//引入重置样式
require('../../assets/css/reset.css')

//引入公共样式
require('../../assets/css/property.css')

//加载自己的样式
require('./sportsdata.less')

// 引入axios 
const request = require('../../../utils/request')

// 引入图表
const echarts = require('echarts')



window.onload = () => {
    //渲染柱状图
    function renderBar(series, xData) {
      //1 创建实例对象
      const myChart = echarts.init(document.querySelector('#barchart'))
  
      //2 写上配置项
      let option = {
        //标题组件
        title: {
          text: '近7天运动时长',
          left: 15,
          top: 15,
        },
        //提示框组件
        tooltip: {
            top:30,
        },
        //图例组件
        legend: {},
        xAxis: {
          data: xData,
          //['11-5', '11-6', '11-7', '11-8', '11-9', '11-10', '11-11']
        },
        yAxis: {},
        //核心数据
        series: series,
      }
  
      //3 载入配置
      myChart.setOption(option)
    }
  
    //渲染饼图
    function renderPie() {
      //1 创建实例
      const myChart = echarts.init(document.querySelector('#piechart'))
  
      //2 配置项
      let option = {
        title: {
          text: '运动分类',
          left: 15,
          top: 15,
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 'middle',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {
                value: 40,
                name: '训练',
                label: {
                  // show: false,
                  position: 'inside',
                  color: '#fff',
                  formatter: '{c}%',
                },
                itemStyle: {
                  color: '#58bb92',
                },
              },
              {
                value: 25,
                name: '跑步',
                label: {
                  position: 'inside',
                  color: '#fff',
                  formatter: '{c}%',
                },
                itemStyle: {
                  color: '#736171',
                },
              },
              {
                value: 35,
                name: '骑行',
                label: {
                  position: 'inside',
                  color: '#fff',
                  formatter: '{c}%',
                },
                itemStyle: {
                  color: '#ee5c43',
                },
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
  
      //3 导入配置
      myChart.setOption(option)
    }
  
    renderPie()
  
    //获取数据函数
    function getData() {
      request.get('/api/exercise').then(res => {
        //解构数据
        let {errno, data} = res.data
        //判断
        if (errno === 0) {
          //处理数据 & 渲染视图
          console.log('data :>> ', data)
          //抽离x轴数据
          let xData = data.days.map(v => v.date.slice(5))
  
          //第一个数组
          // let o1 = {
          //   type: 'bar',
          //   name: 'count',
          //   data: data.days.map(v => v.count),
          // }
          // let o2 = {
          //   type: 'bar',
          //   name: 'sumCalorie',
          //   data: data.days.map(v => v.sumCalorie),
          // }
          // let o3 = {
          //   type: 'bar',
          //   name: 'sumDuration',
          //   data: data.days.map(v => v.sumDuration),
          // }
          // let o4 = {
          //   type: 'bar',
          //   name: 'sumMeter',
          //   data: data.days.map(v => v.sumMeter),
          // }
          // let series = [o1, o2, o3, o4]
  
          //抽离name
          let arr = ['count', 'sumCalorie', 'sumDuration', 'sumMeter']
          let series = arr.map(name => ({
            name: name,
            type: 'bar',
            data: data.days.map(v => v[name]),
          }))
  
          //渲染柱状图
          renderBar(series, xData)
        }
      })
    }
  
    //初始化获取数据
    getData()
  }
